<template>
    <div class="login-container">
        <h1>Login</h1>
        <form @submit.prevent="handleLogin">
            <div class="form-group">
                <label for="username">Username (Phone Number):</label>
                <input
                    type="text"
                    id="username"
                    v-model="form.phone"
                    placeholder="Enter your phone number"
                    required
                />
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input
                    type="password"
                    id="password"
                    v-model="form.password"
                    placeholder="Enter your password"
                    required
                />
            </div>
            <div class="form-group">
                <label for="coreRole">Role:</label>
                <select id="coreRole" v-model="form.role" required>
                    <option value="admin">admin</option>
                    <option value="doctor">doctor</option>
                    <option value="patient">patient</option>
                </select>
            </div>
            <button type="submit">Login</button>
            <div style="height: 20px;"></div>
            <button type="button" @click="goToRegister">Register</button>
        </form>
    </div>
</template>

<script>
import { login } from '@/api/user';

export default {
    data() {
        return {
            form: {
                phone: '',
                password: '',
                coreRole: '',
            },
        };
    },
    methods: {
        async handleLogin() {
            localStorage.clear();
            // 前端基础验证
            if (!this.form.phone || !this.form.password || !this.form.role) {
                alert('用户名和密码不能为空');
                return;
            }
                       
            localStorage.setItem('phone', this.form.phone);
            localStorage.setItem('role', this.form.role);

            this.loading = true; // 开始加载
            
            try {
                // 调用登录接口
                const response = await login(this.form);
                if (response.data !== null) {
                    // 登录成功，处理响应数据
                    console.log('登录成功:', response.data);
                    alert('登录成功！');
                    // 这里可以进行路由跳转或其他操作
                    this.$router.push({ name: 'Home' });
                } else {
                    // 登录失败，处理错误信息
                    console.error('登录失败:', response.data);
                    alert(`登录失败: ${response.data || '未知错误'}`);
                }
                
                
            } catch (error) {
                // 错误处理
                if (error.response) {
                    // 请求成功但服务器返回错误状态码
                    console.error('服务器响应异常:', error.response.data);
                    alert(`登录失败: ${error.response.message || '服务器错误'}`);
                } else if (error.request) {
                    // 请求已发送但无响应
                    console.error('无服务器响应:', error.request);
                    alert('无法连接服务器，请检查网络');
                } else {
                    // 其他错误
                    console.error('请求错误:', error.message);
                    alert('登录请求失败');
                }
            } finally {
                this.loading = false; // 结束加载
            }
        },
        goToRegister() {
            localStorage.clear();
            this.$router.push({ name: 'Register' });
        },
    },
};
</script>

<style scoped>
.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    background-color: #fff;

}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input,
select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}
</style>